<template>
  <div class="play">
    <audio controls autoplay @timeupdate="timeUpdate"
      :src="`https://music.163.com/song/media/outer/url?id=${music.id}.mp3`"
      ref="player" @ended="ended" ></audio>
    <div class="miniplayer">
        <img
          @click="showFull"
          :style="{ animationPlayState: playstate ? 'running' : 'paused' }"
          :src="music.picUrl || music.al.picUrl"
        />
      <div
        @click="showFull"
        :style="{ animationPlayState: playstate ? 'running' : 'paused' }"
        class="name"
      >
        {{ music.name }}
      </div>

      <div class="button" @click="changePlayState">
        <canvas width="60" ref="playbtn" height="60"></canvas>
        <i
          :class="['fa', playstate ? 'fa-pause' : 'fa-play']"
          :style="{ marginLeft: playstate ? '1px' : '2px' }"
        ></i>
      </div>
    </div>
    <transition
      enter-active-class="animate__animated animate__slideInUp"
      leave-active-class="animate__animated animate__slideOutDown"
    >
      <div v-if="fullscreen" class="fullscreen">
        <div class="bg bg1" style="background-color: rgba(0, 0, 0, 0.5); filter: none;" ></div>
        <div class="bg bg2" :style="{ backgroundImage: `url(${music.picUrl || music.al.picUrl})`, }"></div>
        <full-sceen
          :music="music"
          @hidefull="fullscreen = $event"
          :playstate="playstate"
          :currentTime="currentTime"
          :totalTime="totalTime"
          @changetime="changeTime"
          @playorpaused="changePlayState"
          :playCollect="playCollect"
          @changemusic="$emit('changemusic', $event)"
          @changecircle="changecircle"
          :cirlceMode="cirlceMode"
          @play="$emit('play', $event)"
          @changeSong="changeSong"
        ></full-sceen>
      </div>
    </transition>
  </div>
</template>

<script>
import FullSceen from "./FullSceen.vue";
export default {
  components: { FullSceen },
  props: {
    music: Object,
    playCollect: Array,
    cirlceMode: String,
  },
  data() {
    return {
      playbtn: null,
      playstate: true, //true播放，false暂停
      fullscreen: false, //是否全屏
      currentTime: 0, //当前音乐播放时间
      totalTime: 0, //当前音乐的总时长
    };
  },
  mounted() {
    // console.log("获取播放时间"==> this.$refs.playbtn);
    this.playbtn = this.$refs.playbtn;
  },
  methods: {
    timeUpdate(event) {
      let currentTime = event.target.currentTime;
      this.currentTime = currentTime; 
      let totalTime = event.target.duration;
      this.totalTime = totalTime;
      //console.log("播放时间==>", currentTime,totalTime);
      this.drawCircle(currentTime, totalTime);
    },
    drawCircle(c, t) {
      let cxt = this.playbtn.getContext("2d");
      cxt.clearRect(0, 0, 60, 60); 
      //绘制一个圆形.
      cxt.beginPath();
      cxt.strokeStyle = "#ccc";
      cxt.lineWidth = 2;
      cxt.arc(30, 30, 15, 0, 2 * Math.PI); 
      cxt.stroke();
      cxt.closePath();

      //绘制播放的进度
      cxt.beginPath();
      cxt.strokeStyle = "gray";
      cxt.arc(30, 30, 15, 0, 2 * Math.PI * (c / t)); //当前时间/总时长. * 2π
      cxt.stroke();
      cxt.closePath();
    },
    changePlayState() {
      //切换播放暂停状态
      this.playstate = !this.playstate;
      let player = this.$refs.player;
      if (this.playstate) {
        player.play(); 
      } else {
        player.pause(); 
      }
    },
    showFull() {
      this.fullscreen = true;
    },
    changeTime(ctime) {
      //修改播放时间
      this.$refs.player.currentTime = ctime;
    },
    changeSong(item) {
      this.$emit("changeSong", item);
    },
    ended() {
      this.$emit("changemusic", 2); 
      this.$refs.player.currentTime = 0;
      this.$refs.player.play(); 
    },
    changecircle(event) {
      this.$emit("changecircle", event);
    },
  },
  watch: {
    music() {
      this.playstate = true;
    },
  },
};
</script>

<style lang="less" scoped>
.play {
  border-top: 1px solid #ccc;
  background-color: #e4393c ;
  width: 100%;
  position: fixed;
  bottom: 0px;
  z-index: 9;
  audio {
    display: none;
  }
  .miniplayer {
    display: flex;
    align-items: center;
    overflow: hidden;
      img {
        width:  30px;
        height: 30px;
        display: block;
        border-radius: 50%;
        overflow: hidden;
        margin: 7px;
        border:8px solid #222;
        animation: round 3s linear infinite;
      }

    .name {
      flex: 1;
      line-height: 50px;
      padding: 0px 10px;
      color: #ffffff;
      white-space: nowrap;
      font-weight: 500;
      overflow: hidden;
    }
    .button {
      background-color: #e4393c;
      width: 60px;
      position: relative;
      i {
        &.fa {
          margin-top: -1px;
          position: absolute;
          color: white;
          left: 50%;
          top: 50%;
          font-size: 10px;
          transform: translate(-50%, -50%);
          margin-left: 2px;
        }
      }
    }
  }
  .fullscreen {
    //全屏
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 11;
    .bg {
      position: fixed;
      top: -10px;
      left: -10px;
      width: 110%;
      height: 110%;
      overflow: hidden;
      z-index: 9;
      background-color: rgba(0, 0, 0, 0.5);
      filter: blur(8px);
    }
    .bg1 {
      z-index: 9;
      filter: none;
      background-color: rgba(0, 0, 0, 0.5);
    }
    .bg2 {
      z-index: 8;
      background-size: 100%;
    }
  }
}
@keyframes round {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes movegun {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
</style>